<template>
  <div class="cart-list">
    <div class="container" v-if="cartList.length > 0">
      <!-- 订单区域 -->
      <div class="list">
        <el-table
          :data="cartList"
          ref="multipleTable"
          highlight-current-row
          @selection-change="handleSelectionChange"
          style="width: 100%">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            property="goods.goodsName"
            label="商品名称"
            align="center"
            width="120">
          </el-table-column>
          <el-table-column
            property="goods.coverImg"
            label="商品图"
            align="center"
            width="120">
            <template slot-scope="scope">
               <el-image
               style="width: 100px"
                :src="scope.row.goods.coverImg"></el-image>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            property="goods.sellPrice"
            label="单价">
          </el-table-column>
          <el-table-column
            property="amount"
            label="数量"
            align="center"
            width="150">
            <template slot-scope="scope">
              <el-input-number size="small" @change="numChange" v-model="scope.row.amount" :min="1" :max="100" label="商品个数"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column
            property="totalMoney"
            align="center"
            label="小计">
            <template slot-scope="scope">
              {{scope.row.amount * scope.row.goods.sellPrice}}
            </template>
          </el-table-column>
          <el-table-column
            property="goods.shippingAddress"
            align="center"
            label="地址">
          </el-table-column>
          <el-table-column
            align="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="deleteCart(scope.$index, scope.row)">删除该商品</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 订单结算 -->
      <div class="purches">
        <div class="left">
          <a href="/index">继续购物</a>
          <div>
            共<span>{{ cartList.length }}</span
            >种商品，已选择<span>{{ selectNum }}</span
            >种
          </div>
        </div>
        <div class="right">
          <div class="totalPrice">
            合计：<span>{{ totalPrice }}</span
            >元
          </div>
          <el-button type="warning" @click="payClick" :disabled="multipleSelection.length===0">去结算</el-button>
        </div>
      </div>
    </div>
    <show-no-data v-else></show-no-data>
    <!-- <el-dialog title="添加收货地址" :visible.sync="addressDialog" width="60%">
      <span>收货地址：</span>
      <el-select v-model="good.consigneeAddress" clearable placeholder="请选择">
        <el-option
          v-for="item in addressList"
          :key="item.address"
          :label="item.address"
          :value="item.id">
        </el-option>
      </el-select>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary"  @click="payClickReal">确认</el-button>
      </div>
    </el-dialog> -->
  </div>
</template>

<script>
import ShowNoData from "components/nodata/ShowNoData";
import { mapMutations, mapState } from 'vuex';
export default {
  name: "cartList",
  data() {
    return {
      good: {
        consigneeAddress: '',
        consigneePhone: '',
        consigneeName: ''
      },
      addressList: [], // 收货地址
      // addressDialog: false, // 选择收货地址弹框
      multipleSelection: [],
      cartList: [], //购物车列表
      // totalPrice: 0, //总金额
      isSelectedAll: false, //是否全部选中
    };
  },
  components: {
    ShowNoData,
  },
  computed: {
    ...mapState(['user']),
    selectNum () {
      return this.multipleSelection.length
    },
    totalPrice () {
      return this.multipleSelection.reduce((total, cur) => {
        return (cur.amount * cur.goods.sellPrice) ? (cur.amount * cur.goods.sellPrice) + total : total
      }, 0)
    }
  },
  mounted() {
    this.getCartList();
    this.getAddressList()
  },
  methods: {
    ...mapMutations(['setCartNum', 'setCurGoods']),
    /**
     * 删除购物车中商品
     */
    deleteCart (index, cart) {
      let params = {
        id: cart.id
      }
      this.$api.cart.delCart(params).then(res => {
        if (res.code === 200) {
          this.cartList.splice(index, 1)
        }
      })
    },
    /**
     * 关闭收货地址弹框
     */
    closeDialog () {
      this.addressDialog = false
    },
    /**
     * 获取收货地址
     */
    getAddressList () {
      let query = {
        userId: this.user.id
      }
      this.$api.cart.getAddressList(query).then(res => {
        if (res.code === 200) {
          this.addressList = res.data
        }
      })
    },
    /**
     * 复选框选择
     */
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /**
     * 商品数量增减
     */
    numChange (num) {
    },
    /**
     * 获取购物车列表数组
     */
    getCartList() {
      let query = {
        userId: this.user.id
      }
      this.$api.cart.cartByUser(query).then(res => {
        if (res.code === 200) {
          // res.data.forEach(item => {
          //   this.$set(item, 'selected', false)
          // })
          this.cartList = res.data
          this.setCartNum(res.data.length)
        }
      })
    },
    /**
     * 触发弹框  
     */   
    payClick() {
      // this.addressDialog = true
      let params = this.multipleSelection.map(item => {
        return {
          id: item.goodsId,
          shoppingId: item.id,
          goodsSerialNumber: item.goods.serialNumber,
          amount: item.amount,
          totalMoney: item.amount * item.goods.sellPrice
        }
      })
      this.setCurGoods(params)
      this.$router.push({
        path: '/order/confirm'
      })
    },
    /**
     * 点击结算
     */
    payClickReal () {
      let selects = this.addressList.filter(item => item.id === this.good.consigneeAddress)[0]
      let arr = this.multipleSelection.map(item => {
        return {
          shoppingId: item.id,
          userId: this.user.id,
          goodsSerialNumber: item.goods.serialNumber,
          amount: item.amount,
          totalMoney: item.amount * item.goods.sellPrice,
          consigneeAddress: selects.address,
          consigneePhone: selects.consigneePhone,
          consigneeName: selects.consigneeName
        }
      })
      let params = {
        orderList: arr
      }
      this.$api.cart.epay(params).then(res => {
        if (res.code === 200) {
          // this.$router.push("/order/confirm");
          if (res.data.code) {
            this.$router.push({
              path: '/order',
            })
          } else {
            this.$message({
              type: 'warning',
              message: res.msg
            })
          }
        }
      })
    }
  }
};
</script>
<style scoped>
.cart-list{
  max-width: 100%;
}
.container{
  width: 100%;
}
/* 订单总区域 */
.list {
  margin-top: 30px;
  padding: 0 43px;
  height: 450px;
  overflow: auto;
  background-color: #fff;
}
.list::-webkit-scrollbar {
width:8px;
height:8px;
}
/*滚动条里面小方块样式*/
.list::-webkit-scrollbar-thumb {
border-radius:100px;
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
background:gray;
}
/*滚动条里面轨道样式*/
.list::-webkit-scrollbar-track {
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.2);
border-radius:0;
background:rgba(0,0,0,0.1);
}
/* 订单列表 */
.list-item {
  display: flex;
  align-items: center;
  height: 125px;
  border-top: 2px solid #e5e5e5;
}
.select-btn {
  width: 22px;
  height: 22px;
  margin-right: 20px;
  margin-right: 74px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}

.item-img {
  width: 80px;
  height: 80px;
  margin-right: 30px;
}
.item-img img {
  width: 100%;
}
.item-desc {
  max-width: 350px;
  font-size: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 85px;
}
.item-price {
  width: 40px;
  font-size: 16px;
  margin-right: 65px;
  white-space: nowrap;
}
.item-count {
  font-size: 16px;
  width: 150px;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
  margin-right: 45px;
  border: 2px solid #e5e5e5;
}
.item-count .sub,
.item-count .add {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 20px;
  cursor: pointer;
}
.item-count .sub {
  border-right: 1px solid #e5e5e5;
}
.item-count .add {
  border-left: 1px solid #e5e5e5;
}

.item-total {
  width: 40px;
  font-size: 18px;
  color: #f60;
  margin-right: 100px;
  white-space: nowrap;
}
.delete-item {
  width: 14px;
  height: 12px;
  background: url("/imgs/icon-close.png") no-repeat;
  background-size: contain;
  cursor: pointer;
}

/* 订单头部 */
.list-header {
  display: flex;
  height: 79px;
  align-items: center;
}
.select-all-btn {
  width: 22px;
  height: 22px;
  margin-right: 20px;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e5e5e5;
}
.select-all-text {
  font-size: 14px;
  color: #666;
  margin-right: 140px;
}
.goods-name {
  /* margin-right: 391px; */
  max-width: 350px;
}
.goods-price {
  /* margin-right: 126px; */
  width: 40px;
  text-align: center;
}
.goods-count {
  margin-right: 125px;
}
.goods-total {
  margin-right: 110px;
}

/* 订单结算区域 */
.purches {
  display: flex;
  align-items: center;
  height: 112px;
  background-color: fff;
  justify-content: space-between;
}
.left {
  display: flex;
}
.left a {
  color: #333;
  margin-right: 40px;
}
.left span {
  padding: 0 4px;
  color: #ff6600;
}
.right {
  display: flex;
  align-items: center;
}
.right .totalPrice {
  color: #ff6600;
  margin-right: 20px;
}
.right .totalPrice span {
  font-size: 18px;
}
.right .goPay {
  width: 150px;
  height: 40px;
  /* background-color: #ff6600; */
  color: #fff;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
.checked {
  background: url("/imgs/icon-gou.png") no-repeat center;
  background-size: 22px;
  background-color: #ff6600;
  border: 1px solid #ff6600;
}
</style>
